import {Image, Text, View} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Template from 'views/template';

import {useEffect} from 'react';

const Tab = createBottomTabNavigator();
export default () => {
  const iconStyles = {
    width: 24,
    height: 24,
  };
  return (
    <Tab.Navigator
      initialRouteName="index"
      screenOptions={() => {
        return {
          headerShown: false,
          tabBarStyle: {
            height: 56,
          },
          tabBarActiveTintColor: '#0A59F7',
        };
      }}>
      <Tab.Screen
        name="index"
        getComponent={() => require('views/home/index').default}
        options={{
          tabBarLabel: '首页',
          headerShown: false,
          header(props) {
            return (
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'white',
                  paddingVertical: 11,
                }}>
                <Image
                  style={{
                    width: 24,
                    height: 22,
                    marginRight: 4,
                  }}
                  source={require('assets/images/image.png')}></Image>
                <Text style={{fontSize: 18}}>NFC墨水屏</Text>
              </View>
            );
          },
          tabBarIcon: ({focused}) => (
            <Image
              {...iconStyles}
              source={
                focused
                  ? require('assets/images/home.png')
                  : require('assets/images/home_unselected.png')
              }
            />
          ),
        }}
      />
      <Tab.Screen
        name="create"
        getComponent={() => require('views/create/index')?.default}
        options={{
          tabBarLabel: '创作',
          tabBarIcon: ({focused}) => (
            <Image
              {...iconStyles}
              source={
                focused
                  ? require('assets/tabs/pen-tool.png')
                  : require('assets/images/pen-tool.png')
              }
            />
          ),
        }}
      />
      <Tab.Screen
        name="template"
        component={(navigate) => <Template navigate={navigate} showHeader={true}></Template>}
        options={{
          tabBarLabel: '模板',
          tabBarIcon: ({focused}) => (
            <Image
              {...iconStyles}
              source={
                focused
                  ? require('assets/images/layout_selected.png')
                  : require('assets/images/layout.png')
              }
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};
